<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="../style/css.css" />
    <script type="text/javascript">
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        window.onload = function() {
            //举例1 创建一个“广州”节点，添加到#city下
            myClick("btn01", function () {
                //1.创建广州节点，<li>广州</li>
                    //创建元素节点li
                  var li=  document.createElement("li");
                  // alert(li);
                   //创建文本节点广州
                  var gzText=  document.createTextNode("广州");
                  // alert(gzText);
                //将gzText设置li的子节点 语法:父节点.appendChild(子节点)
                li.appendChild(gzText);
                //2.添加到city下 获取id为city的节点
                var city=document.getElementById("city");
                city.appendChild(li);//将li设置city的子节点
            });

            //举例2 将"广州"节点插入到#bj前面
            myClick("btn02",function () {
            //1.创建广州节点
                var li=document.createElement("li");
                var gzText=document.createTextNode("广州");
                li.appendChild(gzText);
                //2.获取id为bj的节点
                var bj=document.getElementById("bj");
                //3.获取父节点id为city
                var city=document.getElementById("city");
                city.insertBefore(li,bj);
            });
            // 举例3 使"广州"节点替换#bj节点
            myClick("btn03",function () {
                var li=document.createElement("li");
                var gzText=document.createTextNode("广州");
                li.appendChild(gzText);//向父节点中添加一个新的节点
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                city.replaceChild(li,bj);//replaceChild() 可以使用指定的节点替换已有的节点
            });

            // 举例4 删除#bj节点
            myClick("btn04",function () {
                var bj=document.getElementById("bj");
                // var city=document.getElementById("city"); //第一种方法
                // city.removeChild(bj);//删除子节点 //第一种方法
                bj.parentNode.removeChild(bj);//第2种方法 常用
            });

            // 举例5 读取#city内的HTML代码
            myClick("btn05",function () {
            var city=document.getElementById("city");
            alert(city.innerHTML);
            });
            // 举例6 设置#bj内的HTML代码
            myClick("btn06",function () {
                var bj=document.getElementById("bj");
                bj.innerHTML="通州区";
            });
            //举例7 创建一个"广州"节点,添加到#city下
            myClick("btn07",function () {
            var city=document.getElementById("city");
            city.innerHTML+="<li>广州</li>";//+= 表示在后面添加一个节点
            });
        };

    </script>

</head>
<body>
<script>
    /*  1. document.createElement()(创建元素节点),它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
    *   并将创建好的对象作为返回值返回
    *   2. document.createTextNode()创建文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
    *   3.appendChild() 向父节点中添加一个新的节点
    *       语法:父节点.appendChild(子节点)
    *   4.city.insertBefore()可以将指定的子节点前插入新的子节点
    *       语法:父节点.insertBefore(新节点，旧节点)
    *   5.replaceChild() 可以使用指定的节点替换已有的节点
    *       语法:父节点.replaceChild(新节点，旧节点)
    *   6.removeChild()删除子节点
    *       语法:父节点.removeChild(子节点) 第一种方法
    *           子节点.parentNode.removeChild(子节点) 第二种方法 常用
    * */
</script>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

    </div>
</div>
<div id="btnList">
    <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
    <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
    <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
    <div><button id="btn04">删除#bj节点</button></div>
    <div><button id="btn05">读取#city内的HTML代码</button></div>
    <div><button id="btn06">设置#bj内的HTML代码</button></div>
    <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
